<link href= "./pages/example/map/mapGeneral.css" rel= "stylesheet" type= "text/css" >
<div id="map2" style="width: auto;height: auto">
    <el-tabs v-model="tabName" @tab-click=handleClick>
        <el-tab-pane label="区域网格" name="first" v-if="GridTab">
<!--            <div style="margin-left: 10px;float: left">-->
<!--                <el-input placeholder="输入位置关键字快速定位" v-model="cityName" style="width: 400px;height: 30px;">-->
<!--                    <el-button slot="append" type="danger" icon="el-icon-search" @click="theLocation()"></el-button>-->
<!--                </el-input>-->
<!--            </div>-->
<!--            <div style="float: right;">-->
<!--                <el-link type="primary" @click="showTool()" style="font-size: 22px"><i class="el-icon-share"></i>创建网格</el-link>-->

<!--                <el-link type="primary" @click="editPolygon()" style="font-size: 22px"><i class="el-icon-edit"></i>修改网格</el-link>-->

<!--            </div>-->
            <div id="allmapGeneral">

            </div>
            <div style="margin-left: 1px;width:300px;height:45px;top:1px;position:absolute;z-index:9999;background-color:#FFFFFF;">
                <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="机构树" name="1">
                        <!--                        <el-col :span="5">-->
                        <yufp-ext-tree ref="mytree" @node-click="nodeClickFn" :height="heightOrg" :data-url="treeUrlRel" data-id="orgId"
                                       data-label="orgName" data-pid="upOrgId" :data-root="dataRoot" :data-params="dataParams" lazy></yufp-ext-tree>
                        <!--                        </el-col>-->
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div style="right: 18px;width:46px;height:33px;top:380px;position:absolute;z-index:9999;background-color:#FFFFFF;">
                <el-popover
                        placement="left-start"
                        :width="popoverWidth"
                        trigger="manual"
                        v-model="visible">
                    <el-button type="danger">网格业绩</el-button>
                    <hr>
                    <div style="height:298px;overflow:auto;">
                        <yu-row :gutter="24">
                            <yu-col :span="4">
                                <!-- 网格名称-->
                                <h2>{{gridName}}</h2>
                            </yu-col>
                            <yu-col :span="6">
                                <!--网格标签-->
                                <el-button type="warning">对私网格</el-button>
                                <el-button type="danger">苏州吴江区</el-button>
                            </yu-col>
                            <yu-col :span="14">
                                <h4>客户转化率&nbsp;&nbsp;&nbsp;&nbsp;{{custCvr}}</h4>
                            </yu-col>
                            <yu-col :span="4">
                                <h4>网格客户数&nbsp;&nbsp;&nbsp;&nbsp;{{gridCustNum}}</h4>
                            </yu-col>
                            <yu-col :span="4">
                                <h4>我行客户&nbsp;&nbsp;&nbsp;&nbsp;{{custNum}}</h4>
                            </yu-col>
                            <yu-col :span="4">
                                <h4>贷款时点&nbsp;&nbsp;&nbsp;&nbsp;{{loanBal}}</h4>
                            </yu-col>
                            <yu-col :span="4">
                                <h4>理财时点&nbsp;&nbsp;&nbsp;&nbsp;{{fincBal}}</h4>
                            </yu-col>
                            <yu-col :span="8">
                                <h4>存款余额&nbsp;&nbsp;&nbsp;&nbsp;{{depBal}}</h4>
                            </yu-col>
                            <yu-col  :span="12">
                                <el-button type="danger">客户数</el-button>
                                <div  style="height:300px;margin-top: -10px">
<!--                                    <yu-echarts id="barOption" :option="barOption" style="height:300px;width: 500px;margin-top: -10px"></yu-echarts>-->
                                    <div id="barOption1" ref="barOption1" style="height:300px;width: 500px;margin-top: -10px"></div>
                                </div>
                            </yu-col>
                            <yu-col  :span="12">
                                <el-button type="danger">AUM</el-button>
                                <div style="height:300px;">
<!--                                    <yu-echarts id="barOptionAUM" :option="barOptionAUM" style="height:300px;width: 500px;margin-top: -10px"></yu-echarts>-->
                                    <div id="barOptionAUM" ref="barOptionAUM" style="height:300px;width: 500px;margin-top: -10px"></div>
                                </div>
                            </yu-col>
                            <yu-col  :span="24">
                                <el-button type="danger">客户数变化</el-button>
                                <div style="height:300px;">
                                    <div id="categoryOption" ref="categoryOption" style="height:300px;width: 1100px;margin-top: -10px"></div>
                                </div>
                            </yu-col>
                            <yu-col  :span="24">
                                <el-button type="danger">存款时点</el-button>
                                <div style="height:300px;">
                                    <div id="shadowOption" ref="shadowOption" style="height:300px;width: 1100px;margin-top: -10px"></div>
                                </div>
                            </yu-col>
                        </yu-row>
                    </div>
                    <el-button slot="reference" @click="visible = !visible"  type="danger" icon="el-icon-arrow-down"></el-button>
                </el-popover>
            </div>
<!--            <div style="right: 30px;width:80px;height:40px;top:450px;position:absolute;z-index:9999;background-color:#FFFFFF;">-->
<!--                <el-collapse v-model="activeNames2" @change="handleChange2">-->
<!--                    <el-collapse-item name="1" style="color: red">-->

<!--                    </el-collapse-item>-->
<!--                </el-collapse>-->
<!--            </div>-->
        </el-tab-pane>
        <el-tab-pane label="建筑物场景" name="second" v-if="GridInfoTab" >
            <div id="allmapGenera2">
            </div>
            <div style="margin-left: 1px;width:350px;height:40px;top:1px;position:absolute;z-index:9999;background-color:#FFFFFF;">
                <el-tabs v-model="activeName3" @tab-click="handleClick3">
                    <el-tab-pane label="社区" name="first"></el-tab-pane>
                    <el-tab-pane label="商圈" name="second"></el-tab-pane>
                    <el-tab-pane label="企业" name="third"></el-tab-pane>
                    <el-tab-pane label="市场" name="fourth"></el-tab-pane>
                    <el-tab-pane label="楼宇" name="fifth"></el-tab-pane>
                    <el-tab-pane label="政治" name="sixth"></el-tab-pane>
                    <el-tab-pane label="综合" name="seventh"></el-tab-pane>
                </el-tabs>
            </div>
<!--            <div style="right: 18px;width:46px;height:33px;top:380px;position:absolute;z-index:9999;background-color:#FFFFFF;">-->
<!--                <el-popover-->
<!--                        placement="left-start"-->
<!--                        width="1500"-->
<!--                        trigger="manual"-->
<!--                        v-model="visibleBUD">-->
<!--                    <el-button type="danger">建筑物业绩</el-button>-->
<!--                    <hr>-->
<!--                    <div style="height:298px;width:1500px;overflow:auto;">-->
<!--                        <yu-row :gutter="24">-->
<!--                            <yu-col :span="4">-->
<!--                                &lt;!&ndash; 网格名称&ndash;&gt;-->
<!--                                <h2>长虹街道社区网格</h2>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="6">-->
<!--                                &lt;!&ndash;网格标签&ndash;&gt;-->
<!--                                <el-button type="warning">对私网格</el-button>-->
<!--                                <el-button type="danger">苏州吴江区</el-button>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="14">-->
<!--                                <h4>客户转化率&nbsp;&nbsp;&nbsp;&nbsp;80%</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="4">-->
<!--                                <h4>网格客户数&nbsp;&nbsp;&nbsp;&nbsp;356,563</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="4">-->
<!--                                <h4>我行客户&nbsp;&nbsp;&nbsp;&nbsp;1,736,345</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="4">-->
<!--                                <h4>贷款时点&nbsp;&nbsp;&nbsp;&nbsp;23,545</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="4">-->
<!--                                <h4>理财时点&nbsp;&nbsp;&nbsp;&nbsp;436,545</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col :span="8">-->
<!--                                <h4>存款余额&nbsp;&nbsp;&nbsp;&nbsp;746,168</h4>-->
<!--                            </yu-col>-->
<!--                            <yu-col  :span="12">-->
<!--                                <el-button type="danger">客户数</el-button>-->
<!--                                <div  style="height:300px;margin-top: -10px">-->
<!--                                    <div id="barOption" ref="barOption1" style="height:300px;width: 500px;margin-top: -10px"></div>-->
<!--                                </div>-->
<!--                            </yu-col>-->
<!--                            <yu-col  :span="12">-->
<!--                                <el-button type="danger">AUM</el-button>-->
<!--                                <div style="height:300px;">-->
<!--                                    <div id="barOptionAUM1" ref="barOptionAUM" style="height:300px;width: 500px;margin-top: -10px"></div>-->
<!--                                </div>-->
<!--                            </yu-col>-->
<!--                            <yu-col  :span="24">-->
<!--                                <el-button type="danger">客户数变化</el-button>-->
<!--                                <div style="height:300px;">-->
<!--                                    <div id="categoryOption1" ref="categoryOption" style="height:300px;width: 1100px;margin-top: -10px"></div>-->
<!--                                </div>-->
<!--                            </yu-col>-->
<!--                            <yu-col  :span="24">-->
<!--                                <el-button type="danger">存款时点</el-button>-->
<!--                                <div style="height:300px;">-->
<!--                                    <div id="shadowOption1" ref="shadowOption" style="height:300px;width: 1100px;margin-top: -10px"></div>-->
<!--                                </div>-->
<!--                            </yu-col>-->
<!--                        </yu-row>-->
<!--                    </div>-->
<!--                    <el-button slot="reference" @click="visibleBUD = !visibleBUD"  type="danger" icon="el-icon-arrow-down"></el-button>-->
<!--                </el-popover>-->
<!--            </div>-->
        </el-tab-pane>
    </el-tabs>
</div>
